<template>
  <div class="chartBar">
    <p>{{chartData.title}}</p>
    <canvas id="mountNode"></canvas>
  </div>
</template>

<script>
const F2 = require("@antv/f2");
export default {
  name: "",
  props: ["chartData"],
  data() {
    return {};
  },
  mounted() {
    this.chartBar(this.chartData.data);
  },
  methods: {
    chartBar(data) {
      for (let i = 0; i < data.length; i++) {
        data[i].index = i;
      }
      var data = data;

      var chart = new F2.Chart({
        id: "mountNode",
        pixelRatio: window.devicePixelRatio
      });

      chart.source(data, {
        sales: {
          tickCount: 5
        }
      });
      chart.tooltip(false);
      data.map(function(obj) {
        chart.guide().text({
          position: [obj.date, obj.count],
          content: obj.count,
          style: {
            textBaseline: "bottom",
            textAlign: "center"
          },
          offsetY: -2
        });
      });
      chart
        .interval()
        .position("date*count")
        .color("#35A8FB");
      chart.render();
    }
  }
};
</script>

<style lang="less" scoped>
.chartBar {
  margin-bottom: 20px;
  #mountNode {
    width: calc(100% - 20px);
    height: 220px;
  }
  p {
    text-align: center;
    font-size: 14px;
    line-height: 40px;
  }
}
</style>
